<template>
  <div class="personManage">
    <div class="personManage_header">
      <el-row>
        <el-col :span="24">
          <el-form :inline="true" :model="selModel" class="demo-form-inline">
            <el-form-item label="员工姓名">
              <el-input placeholder="请输入姓名" v-model="selModel.personName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button   type="primary" @click="onSubmit" icon="el-icon-search">
                查询
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="onSubmit" icon="el-icon-plus">
                添加
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <div class="personManage_main">
      <el-table
        :data="personTable"
        style="width: 100%"
        height="55%"
        class="personManage_table"
      >
        <el-table-column
          prop="staffSate"
          label="当前状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.staffSate"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="空闲"
              inactive-text="忙碌"
              active-value=0
              inactive-value=1
              @change="change(scope.row.staffSate)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="staffName"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="staffPosition"
          label="员工职位">
        </el-table-column>
        <el-table-column
          prop="staffAge"
          label="员工年龄">
        </el-table-column>
        <el-table-column
          prop="staffPhone"
          label="员工手机号">
        </el-table-column>
        <el-table-column
          prop="staffNum"
          label="身份证件号码">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text">查看</el-button>
<!--            <el-button type="text">编辑</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <div class="personManage_echaets" id="personManage_echaets">
      </div>
    </div>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false">
      <div class="drawer_top">

      </div>
      <div class="drawer_bottom">
      </div>
    </el-drawer>
  </div>
</template>

<script>
import svgIcon from "../components/SvgIcon";

export default {
  name: "PersonManage",
  components: {svgIcon},
  data(){
    return{
      selModel:{
        personName: "",
      },
      personTable: [
        {
          staffSate:"1",
          staffName:"美美",
          staffPosition:"全能师",
          staffAge:"10",
          staffPhone:"15140690281",
          staffNum:"51132219980329807X",
        },
        {
          staffSate:"1",
          staffName:"美美2",
          staffPosition:"全能师",
          staffAge:"23",
          staffPhone:"15140690281",
          staffNum:"51132219980329807X",
        },
        {
          staffSate:"0",
          staffName:"美美3",
          staffPosition:"全能师",
          staffAge:"23",
          staffPhone:"15140690281",
          staffNum:"51132219980329807X",
        },
        {
          staffSate:"0",
          staffName:"美美4",
          staffPosition:"全能师",
          staffAge:"23",
          staffPhone:"15140690281",
          staffNum:"51132219980329807X",
        },
        {
          staffSate:"0",
          staffName:"美美5",
          staffPosition:"全能师",
          staffAge:"23",
          staffPhone:"15140690281",
          staffNum:"51132219980329807X",
        },
        {
          staffSate:"0",
          staffName:"美美6",
          staffPosition:"全能师",
          staffAge:"23",
          staffPhone:"15140690281",
          staffNum:"51132219980329807X",
        },
        {
          staffSate:"0",
          staffName:"美美7",
          staffPosition:"全能师",
          staffAge:"23",
          staffPhone:"15140690281",
          staffNum:"51132219980329807X",
        },
        {
          staffSate:"0",
          staffName:"美美8",
          staffPosition:"全能师",
          staffAge:"23",
          staffPhone:"15140690281",
          staffNum:"51132219980329807X",
        },
        {
          staffSate:"0",
          staffName:"美美9",
          staffPosition:"全能师",
          staffAge:"23",
          staffPhone:"15140690281",
          staffNum:"51132219980329807X",
        },
        {
          staffSate:"0",
          staffName:"美美10",
          staffPosition:"全能师",
          staffAge:"23",
          staffPhone:"15140690281",
          staffNum:"51132219980329807X",
        }
      ],
      option: {
        backgroundColor:"#ffffff",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true
            }
          }
        },
        legend: {
          data: ["业绩金额", "充值金额"],
          top: "2%",
          right:'10',
          textStyle: {
            color: "rgba(0,0,0,0.6)",
            fontSize: 16
          }
        },
        xAxis: {
          data: [
            "美美1",
            "美美2",
            "美美3",
            "美美4",
            "美美5",
            "美美6",
            "美美7",
            "美美8",
            "美美9",
            "美美10",
          ],
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#26D9FF',
              width:2
            }
          },
          axisTick: {
            show: true //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "rgba(0,0,0,0.6)", //X轴文字颜色
              fontSize: 16
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ["rgba(250,250,250,0.1)", "rgba(250,250,250,0)"]
            }
          }
        },
        yAxis: [{
          type: "value",
          /*name: "亿元",*/
          nameTextStyle: {
            color: "#ebf8ac",
            fontSize: 16
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#26D9FF',
              width:2
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "rgba(0,0,0,0.6)",
              fontSize: 16
            }
          },

        },
          {
            type: "value",
            /*name: "同比",*/
            nameTextStyle: {
              color: "#ebf8ac",
              fontSize: 16
            },
            position: "right",
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              formatter: "{value}", //右侧Y轴文字显示
              textStyle: {
                color: "rgba(0,0,0,0.6)",
                fontSize: 16
              }
            }
          }
        ],
        series: [
          {
            name: "业绩金额",
            type: "bar",
            barWidth: 15,
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "rgba(61,126,235, 1)"
                },
                  {
                    offset: 1,
                    color: "rgba(61,126,235, 0)"
                  }
                ]),
                borderColor:new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "rgba(160,196,225, 1)"
                },
                  {
                    offset: 1,
                    color: "rgba(61,126,235, 1)"
                  }
                ]),
                borderWidth: 2
              }
            },
            data: [320,460,680,250,780,180,0,100,520,310]
          },
          {
            name: "充值金额",
            type: "bar",
            yAxisIndex: 1,
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: 'rgba(15,197,243,1)'}, {offset: 1, color: 'rgba(15,197,243,0)'}]),
                borderColor:new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: 'rgba(180,240,255,1)'}, {offset: 1, color: 'rgba(15,197,243,1)'}]),
                borderWidth: 2
              }
            },
            data: [2000,2000,2000,2000,2000,2000,2000,2000,4000,5000]
          }
        ]
      },
      myChart: "",
      drawer:false,

    }
  },
  mounted() {
    this.init();

    // this.selAllPerson();

  },
  methods:{
    onSubmit(){

    },
    //查询所有人员信息
    selAllPerson(){
      let params = new URLSearchParams();
      params.append("staffUser" , sessionStorage.getItem("companyAccount"));
      this.$api.selAllPerson(params)
        .then((res) =>{
          if(res.code == 200){
            this.personTable = res.data;
          }else{
            this.$message.error("查询失败！暂无基础数据")
          }
        })
        .catch((err) =>{})
    },
    //查询所有金额
    selAllAmount(){

    },
    //初始化echart
    init(){
      this.myChart = this.$echarts.init(document.getElementById("personManage_echaets"));
      this.myChart.setOption(this.option);
      window.addEventListener("resize", () =>{
        this.myChart.resize();
      })
    },
    //切换状态并记录时间
    change(str){

      console.log("str:",str)
    },
    //打开详细信息面板
    handleClick(row){
      this.drawer = true;
    }
  }
}
</script>

<style scoped>
.personManage{
  width: 100%;
  height: 100%;
  /*overflow:scroll;*/
}
.personManage_header{
  width: 100%;
  height: 5%;
}
.personManage_main{
  width: 100%;
  height: 90%;
}
.personManage_table{

}
.personManage_echaets{
  background-color: black;
  width: 100%;
  height: 45%;
}
.drawer_top{
  height: 50%;
  width: 100%;
  background-color: black;
}
.drawer_bottom{
  height: 50%;
  width: 100%;
  background-color: #2473c9;
}
</style>
<style>
.el-form-item__label{
  font-size: 16px !important;
}
</style>
